<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_自定义JS对象</title>
</head>
<body>
<table border="1" >
    <caption>商品表</caption>
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品数量</th>
    </tr>
</table>
<script>

    let productArr = [
        {
            title:'xiaomi14',
            price: 5000,
            num:200
        }
        ,{
            title:'HUAWEI Mate60',
            price: 6000,
            num:100
        }
        ,{
            title:'OPPO Reno8',
            price: 4000,
            num:300
        }
        ,{
            title:'vivo Y20',
            price: 2000,
            num:500
        }

    ]
    for (let i = 0 ; i < productArr.length ; i++){
        let tr = document.createElement('tr');
        let td1 = document.createElement('td');
        let td2 = document.createElement('td');
        let td3 = document.createElement('td');
        td1.innerHTML = productArr[i].title;
        td2.innerHTML = productArr[i].price;
        td3.innerHTML = productArr[i].num;
        tr.append(td1,td2,td3);
        document.querySelector('table').append(tr);
    }



    let p1 = {
        name:'zhangsan',
        age:18,
        say:function (){
            console.log('我是'+this.name+',今年'+this.age+'岁');
        }
    };
    console.log(p1);
    console.log(p1.name);
    console.log(p1.age);
    p1.say();

    //先定义一个空对象，再动态给对象设置属性属性和方法
    let p2 = {};
    p2.name = 'lisi';
    p2.age = 20;
    p2.say = function (){
        console.log('我是'+this.name+',今年'+this.age+'岁');
    };
    console.log(p2);
    console.log(p2.name);
    console.log(p2.age);
    p2.say();



</script>

</body>
</html>